<!--
 * @description: 
 * @Date: 2022-10-25 14:08:58
 * @LastEditTime: 2022-11-09 19:21:14
-->
<template>
  <div class="framer" v-if="frame">
    <el-dialog v-model="frame" append-to-body :show-close="false" :close-on-click-modal="false" :width="frameSize.width"
      :before-close="closeEvent" class="framerAlert" ref="framers" draggable>
      <template #header>
        <div class="flex justify-end">
          <div size="30px" class="cursor-pointer windowController windowfull" @click="fullscreen" @mousemove.stop
            v-show="fullScreen" title="全屏">
            <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M33 6H42V15" stroke="var(--framerSvg)" stroke-width="4" stroke-linecap="round"
                stroke-linejoin="round" />
              <path d="M42 33V42H33" stroke="var(--framerSvg)" stroke-width="4" stroke-linecap="round"
                stroke-linejoin="round" />
              <path d="M15 42H6V33" stroke="var(--framerSvg)" stroke-width="4" stroke-linecap="round"
                stroke-linejoin="round" />
              <path d="M6 15V6H15" stroke="var(--framerSvg)" stroke-width="4" stroke-linecap="round"
                stroke-linejoin="round" />
            </svg>
          </div>
          <div size="30px" class="cursor-pointer windowController windowclose" @click="close" title="关闭窗口">
            <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8 8L40 40" stroke="var(--framerSvg)" stroke-width="4" stroke-linecap="round"
                stroke-linejoin="round" />
              <path d="M8 40L40 8" stroke="var(--framerSvg)" stroke-width="4" stroke-linecap="round"
                stroke-linejoin="round" />
            </svg>
          </div>
        </div>
      </template>
      <div class="componentView">
        <component :is="com" :data="data" @close="close"></component>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import emitter from '../util/emitter';
import appComponent from './plugin';
import { markRaw, shallowRef, ref, reactive, onUnmounted, nextTick } from 'vue';
import { setRootCss } from '../util/tools';
const frame = ref(false);
const data = ref({});
const fullScreen = ref(true);
let isfull = false
const framers = ref(null)
let defSize = {
  width: '800px',
  height: '500px'
}
const fullscreen = () => {
  if (isfull == false) {
    const ele = document.querySelector(".framerAlert")
    const func =
      ele.requestFullscreen ||
      ele.mozRequestFullScreen ||
      ele.webkitRequestFullscreen ||
      ele.msRequestFullscreen;
    func.call(ele);
    isfull = true
  } else {
    const func =
      document.exitFullScreen ||
      document.mozCancelFullScreen ||
      document.webkitExitFullscreen ||
      document.msExitFullscreen;
    func.call(document);
    isfull = false
  }
}
const frameSize = ref(Object.assign({}, defSize))
const com = shallowRef(appComponent['note'])
const open = (event) => {
  const { full = true } = event
  fullScreen.value = full
  const { size = false } = event;
  if (size) {
    frameSize.value.width = size.width;
    frameSize.value.height = size.height;
  } else {
    frameSize.value = Object.assign({}, defSize)
  }
  setRootCss('--frameHeight', frameSize.value.height)
  com.value = appComponent[event.component]
  const { data: dt = {} } = event
  data.value = dt;
  frame.value = true
}
const close = () => {
  frame.value = false;
}
const closeEvent = (next) => {
  frame.value = false;
  next()
}
emitter.on("openPlugin", open)
emitter.on("closePlugin", close)
onUnmounted(() => {
  emitter.off("openPlugin", open)
  emitter.off("closePlugin", close)
})
</script>
<style lang="less">
:root {
  --framerSvg: rgb(165, 165, 165);
  --frameHeight: 500px;
}

.componentView {
  position: absolute;
  width: 100%;
  height: calc(100% - 28px);
}

.framerAlert {
  overflow: hidden;
  min-height: 500px;
  height: var(--frameHeight);

  >.el-dialog__header {
    height: 28px;
    margin-right: 0px;
    border-radius: 10px 10px 0px 0px;
    overflow: hidden;
    padding: 0px !important;
  }

  >.el-dialog__body {
    padding: 0px !important;
  }

  .windowController {
    padding: 5px 10px 5px;

    >svg {
      width: 18px;
      height: 18px;
    }
  }

  .windowfull:hover {
    --framerSvg: rgb(255, 255, 255);
    background-color: rgb(47, 184, 248);
  }

  .windowclose:hover {
    --framerSvg: rgb(255, 255, 255);
    background-color: rgb(255, 0, 13);
  }
}
</style>